<!-- 入库验收详情 -->
<template>
  <div>
    <cus-search>
      <cus-search-item class="mb_20">
        <Form :model="form" @keydown.native.enter.prevent="onInit">
          <FormItem
            label="供应商"
            v-show="isEdit"
            :label-width="60"
            class="mr_48 mb_20"
          >
            <Input v-model="this.$route.query.supplierName" disabled />
          </FormItem>
          <FormItem label="入库单号" :label-width="90" class="mr_48 mb_20">
            <Input v-model="this.$route.query.billNo" disabled />
          </FormItem>
          <FormItem
            class="mr_48 mb_20"
            label="验收员"
            v-if="isEdit"
            :label-width="70"
          >
            <Input v-model="this.$route.query.checkName" disabled />
          </FormItem>
          <FormItem label="存储仓库" :label-width="100" prop="stockId" class="mr_48 mb_20">
            <Select
              placeholder="全部"
              clearable
              v-model="form.stockId"
              @on-change="postApiGoodsStockbillGetApi()"
              style="width: 189px"
            >
              <Option
                v-for="item in storehouseTree"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="物资名称" :label-width="80" class="mr_48 mb_20">
            <Input
              v-model="form.productName"
              placeholder="请输入物资名称"
            />
            </FormItem>
        </Form>
        <cusButton
            class="ml_20 mr_20 mb_20"
            type="primary"
            @onClick="onSearch"
            >查询</cusButton
          >
      </cus-search-item>
    </cus-search>
    <cus-card style="margin-top: 24px;" :showTitle="false">
      <div class="btnBox">
        <cusButton
          class="ml_20"
          v-if="isFlag"
          type="primary"
          @onClick="onAdd"
          style="width: 150px"
          >添加明细</cusButton
        >
      </div>
      <cusTable
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page','cus_operBox']"
      >
        <template slot-scope="{ row }" slot="imageOperation">
          <div style="display: flex; justify-content: center">
            <div style="height: 40px; width: 80px">
              <viewer ref="viewer" :images="row.certificationPicture">
                <div
                  v-for="(item, index) in row.certificationPicture"
                  :key="index"
                  style="height: 40px; width: 80px; margin: auto"
                >
                  <img :src="item.img" style="width: 100%; height: 100%" />
                </div>
              </viewer>
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-if="row.poStockbillentityweights"
              :style="{
                color: '#1E6FFF'
              }"
              style="padding: 0 5px"
              @onClick="onShow(row)"
            >
              <Icon type="ios-search" size="4" style="margin: 2px 3px 0 0" />
              <span>查看</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-if="isFlag"
              :style="{
                color: checkStatus == '已确认' ? '#DADADA' : '#1E6FFF'
              }"
              style="padding: 0 5px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              v-if="isFlag"
              size="small"
              :style="{
                color: checkStatus == '已确认' ? '#DADADA' : '#FF4746'
              }"
              style="padding: 0 5px"
              @onClick="onDelete(row)"
            >
              <Icon type="md-trash" size="4" style="margin: 2px 5px 0 0" />
              <span>删除</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="postApiGoodsStockbillGetApi"
        ></cus-page>
      </div>
    </cus-card>
    <div class="cus_operBox" style="width: calc(100% - 250px)">
      <Button type="error" class="mr_20" @click="onReturn">返回</Button>
    </div>
    <!--添加明细-->
    <manualStorage ref="manualStorage" :isEdit="true"></manualStorage>
    <!--电子秤入库详情-->
    <electronicScaleStorageDetails
      ref="electronicScaleStorageDetails"
    ></electronicScaleStorageDetails>
  </div>
</template>
<script>
import {
  postApiGoodsStockbillGet,
  postApiGoodsStockbillDeletepostockbill,
  getBasstockList,
  postApiGoodsStockbillCanModify
} from "@/api/business/manager";
import manualStorage from "./manualStorage.vue";
import electronicScaleStorageDetails from "./electronicScaleStorageDetails.vue";
export default {
  components: { manualStorage, electronicScaleStorageDetails },
  data() {
    return {
      form: {
        stockId: "", // 存储仓库id
        productName: "", //物资名称


      },
      loading: false,
      // 表头
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
          minWidth: 105
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center",
          minWidth: 75
        },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          align: "center",
          minWidth: 110
        },
        {
          title: "验收数量",
          key: "packagingQty",
          align: "center",
          minWidth: 110
        },
        {
          title: "单价(元)",
          key: "packagingPrice",
          align: "center",
          minWidth: 75
        },
        {
          title: "金额(元)",
          key: "amount",
          align: "center",
          minWidth: 95
        },
        {
          title: "存储仓库",
          align: "center",
          minWidth: 95,
          render: (h, params) => {
            return h("div", [
              h("span", {}, params.row.stock.name ? params.row.stock.name : "")
            ]); //0:已确认,1:未确认
          }
        },
        {
          title: "是否自产",
          key: "isProduced",
          align: "center",
          minWidth: 75,
          render: (h, params) => {
            return h("div", [
              h("span", {}, params.row.isProduced == 1 ? "否" : "是")
            ]);
          }
        },
        {
          title: "最新验收时间",
          key: "createTime",
          align: "center",
          minWidth: 170
        },
        {
          title: "入库照片",
          slot: "imageOperation",
          align: "center",
          minWidth: 100
        },
        {
          title: "操作",
          slot: "operation",
          align: "center",
          width: 175
        }
      ],
      data: [], // 表格列表
      isFlag: false, //判断编辑按钮显示与否
      isEdit: false,
      storehouseTree: [], //存储仓库selectTree数据
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      tableHeight: 0
    };
  },

  created() {
    //是否已确认状态,已确认不可操作,未确认可操作
    this.checkStatus = this.$route.query.checkStatus;
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 440; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.postApiGoodsStockbillGetApi();
    this.getBasstockListApi();
    this.postApiGoodsStockbillCanModifyApi();
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 430; // 表格自适应高度
      }, 100);
    },
    //添加明细
    onAdd() {
      this.$refs["manualStorage"].billNo = this.$route.query.billNo;
      this.$refs["manualStorage"].modal = true;
      this.$refs["manualStorage"].postApiGoodsSelectBasProductListPageApi(); //手工入库登记明细列表
      this.$refs["manualStorage"].getApiGoodsHandaworkSuppliernameApi(); //获取物资食材供应商名称
      this.$refs["manualStorage"].getApiGoodsHandaworkItemApi(); //获取物资食材种类
    },
    // 查询
    onSearch() {
     this.pages.page = 1
     this.postApiGoodsStockbillGetApi()
    },
    //查看
    onShow(row) {
      console.log(row);
      this.$refs["electronicScaleStorageDetails"].data =
        row.poStockbillentityweights;
      this.$refs["electronicScaleStorageDetails"].productName = row.productName;
      this.$refs["electronicScaleStorageDetails"].isEdit = this.isFlag;
      this.$refs["electronicScaleStorageDetails"].show();
    },
    //编辑
    onEdit(row) {
      console.log(row);
      this.$nextTick(()=> {
        this.$refs["manualStorage"].getBasstockListApi();
      });
      this.$refs["manualStorage"].wareForm = JSON.parse(JSON.stringify(row));
      (this.$refs["manualStorage"].isProduced = JSON.parse(
        JSON.stringify(row.isProduced)
      )), //是否自产
        (this.$refs["manualStorage"].isTheLibrary = JSON.parse(
          JSON.stringify(row.isTheLibrary)
        )), //是否越库
        console.log(row.isTheLibrary);
        (this.$refs["manualStorage"].wareForm.name = row.productName);
      this.$refs["manualStorage"].wareForm.productClass = row.goodsTypeName;
      this.$refs["manualStorage"].productId = row.productId;
      this.$refs["manualStorage"].billNo = this.$route.query.billNo;
      this.$refs["manualStorage"].storageway = this.$route.query.storageway;
      this.$refs["manualStorage"].wareForm.stockId = JSON.parse(
          JSON.stringify(row.stockId)
        );
      //编辑时判断规格,规格为公斤,斤时显示重量weight,否则显示数量qty
      // if (row.model == "公斤" || row.model == "斤") {
      //   this.$refs["manualStorage"].wareForm.qty = JSON.parse(
      //     JSON.stringify(row.weight)
      //   );
      //   this.$refs["manualStorage"].wareForm.price = JSON.parse(
      //     JSON.stringify(row.price)
      //   );
      // } else {
      //   this.$refs["manualStorage"].wareForm.qty = JSON.parse(
      //     JSON.stringify(row.qty)
      //   );
      //   this.$refs["manualStorage"].wareForm.price = JSON.parse(
      //     JSON.stringify(row.packagingPrice)
      //   );
      // }
      this.$refs["manualStorage"].wareForm.packagingQty = JSON.parse(
          JSON.stringify(row.packagingQty)
        );
      this.$refs["manualStorage"].wareForm.price = JSON.parse(
          JSON.stringify(row.packagingPrice)
        );
      this.$refs["manualStorage"].warehousingModal = true;
      this.$refs["manualStorage"].Edit = false; //调用修改接口
      
    },
    //删除
    onDelete(row) {
      this.$cu
        .dialog({
          params: row
        })
        .then(({ id }) => {
          this.postApiGoodsStockbillDeletepostockbillApi(id);
        });
    },
    onPrint() {
      window.print();
    },
    //返回上一页面
    onReturn() {
      window.history.back(); //回退，刷新
    },
    //物资入库验收详情列表---------------接口
    postApiGoodsStockbillGetApi() {
      this.loading = true;
      return new Promise(resolve => {
        let params = {
          billNo: this.$route.query.billNo, //采购单号
          stockId: this.form.stockId, //仓库id
          productName: this.form.productName, // 物资名称
          current: this.pages.page,
          size: this.pages.pageSize
        };
        postApiGoodsStockbillGet(params).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            this.data.forEach(element => {
              element.certificationPicture = [];
              if (element.poStockbillentityweights.length > 0) {
                element.poStockbillentityweights.forEach(elemen => {
                  element.certificationPicture.push({ img: elemen.image + "" });
                  console.log(element.certificationPicture);
                });
              }
            });
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    //删除手工入库物资登记添加量----------------接口
    postApiGoodsStockbillDeletepostockbillApi(id) {
      this.loading = true;
      return new Promise(resolve => {
        postApiGoodsStockbillDeletepostockbill({
          id
        }).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.postApiGoodsStockbillGetApi();
          }
          resolve();
        });
      });
    },
    //物资仓库列表----------------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    },
    // 判断是否可以操作添加，编辑等按钮---------接口
    postApiGoodsStockbillCanModifyApi() {
      return new Promise(resolve => {
        postApiGoodsStockbillCanModify({ id: this.$route.query.id }).then(
          res => {
            if (res.retCode == 2000) {
              this.isFlag = res.data;
              console.log(res);
              resolve();
            }
          }
        );
      });
    }
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.operBox {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 88px;
  display: flex;
  flex-direction: row-reverse;
  // width: 100%;
  background: #ffffff;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12),
    0px -1px 2px -2px rgba(0, 0, 0, 0.16);
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
